<template>
  <div v-show="!microAppData">
    <div class="index-header">
      <div class="title">
        <img src="../img/logo.png" alt="" />
        <span>顾家大后台</span>
      </div>
      <div style="display: flex; justify-content: space-between">
        <div class="index-header-menu">
          <!--横向布局-->
          <horizontal v-if="false" @evt_menu_click="evt_menu_click"></horizontal>
        </div>
        <div class="index-header-top">
          <div class="user">
            <div style="margin-right: 8px">
              <a-avatar :size="30" />
            </div>
            <a-dropdown>
              <a class="ant-dropdown-link" @click.prevent>
                admin
                <DownOutlined />
              </a>
              <template #overlay>
                <a-menu>
                  <a-menu-item>个人设置</a-menu-item>
                  <a-menu-item>退出登入</a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { DownOutlined, SearchOutlined } from '@ant-design/icons-vue'
</script>
<style lang="less" scoped>
.index-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 50px;
  color: #fff;
  background: #262f3e;
  user-select: none;

  .title {
    display: flex;
    align-content: center;
    align-items: center;
    margin: 5px 15px;

    img {
      width: 30px;
      height: 30px;
      margin-right: 5px;
    }

    span {
      color: white;
      font-weight: bold;
      line-height: 20px;
    }
  }

  .index-header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .user {
      display: flex;
      align-items: center;
      height: 30px;
      margin-right: 25px;
    }
  }

  .index-header-menu {
    display: flex;
    align-items: center;
    justify-content: right;

    .category-views {
      display: flex;
      align-items: center;
      justify-content: center;
      box-sizing: border-box;
      min-width: 79px;
      height: 32px;
      margin-right: 10px;
      border-radius: 8%;
    }
  }

  .category-color {
    background-color: rgb(91 107 238);
  }

  .ant-dropdown-link {
    width: 100%;
    color: white;
    text-align: center;
  }
}
</style>
